<template>
  <div class="vita-cells-radio">
    <label class="vita-cell vita-cell-radio vita-radio-check" v-for="(index, option) in options" for="radio-{{uuid}}-{{index}}">
      <div class="vita-cell-bd vita-cell-primary">
        <p>{{option}}</p>
      </div>
      <div class="vita-cell-ft">
        <input type="radio" id="radio-{{uuid}}-{{index}}" class="vita-check" v-model="value" value="{{ option }}">
        <span class="vita-icon-checked"></span>
      </div>
    </label>
    <div class="vita-cell" v-if="addon">
      <div class="vita-cell-hd">
        <label class="vita-addonTitle">{{ addonTitle }}</label>
      </div>
      <div class="vita-cell-bd vita-cell-primary">
        <input type="text" class="vita-input" placeholder="{{ placeholder }}" v-model="addonValue" @blur="blurHandler" @focus="focusHandler">
      </div>
      <div class="vita-cell-ft" v-show="!isFocus && value == ''">
        <span class="vita-icon-warn"></span>
      </div>
    </div>
  </div>
</template>

<script>

  import Base from './libs/base.js'
  import _ from './libs/kit.js'

  export default {

    mixins: [Base],

    props: {

      options: {
        type: Array,
        required: true
      },

      value: {
        type: String,
        required: false,
        twoWay: true
      },

      addon: {
        type: Boolean,
        required: false,
        default: false
      },

      addonTitle: {
        type: String,
        required: false
      },

      placeholder: {
        type: String,
        required: false,
        default: '其他'
      }

    },

    data() {
      return {
        addonValue: '',
        isFocus: false
      }
    },

    watch: {

      value(newVal) {
        console.log(newVal)
        const isOption = _.contains(this.options, newVal)
        if (!_.isEmpty(this.value) && isOption) {
          this.addonValue = ''
        }
        this.$dispatch('change', newVal)
      },

      addonValue(newVal) {
        if (this.isFocus && this.addon) {
          this.value = newVal
        }
      }

    },

    methods: {

      focusHandler() {
        this.value = this.addonValue || ''
        this.isFocus = true
      },

      blurHandler() {
        this.isFocus = false
      }

    },

    ready() {
      // const p = new Promise((resolve, reject) => {
      //   resolve('abc')
      // })
      // p.then((data)=> {
      //   console.log(data)
      // }, (error)=> {
      //   console.log(error)
      // })
    }

  }
  
</script>